import React, { useState, useEffect } from "react";

import { Form, Button, Table, Space, Popconfirm, Pagination } from "antd";

import "./AddOne.scss";
import store from "../../../store";
import http from "../../../utils/http";
import getLocalTime from "../../../utils/getLocalTime";

export const AddOne = (props) => {
    // 分页器
    const [newData, setNewData] = useState();
    useEffect(() => {
        http({
            url: "/payCost/tenantPropertyList",
        }).then((res) => {
            // console.log(res.data);

            if (res.code == 200) {
                console.log(res.data);
                let arr = res.data.data.map((v, i) => {
                    return {
                        key: v.ppcId,
                        personName: v.personName,
                        ppcDate: getLocalTime(v.ppcDate),
                        ppcRealDate: getLocalTime(v.ppcRealDate),
                        ppcMoney: v.ppcMoney,
                        ppcType: v.ppcType,
                    };
                });
                store.qintianyong.total = res.data.count;
                console.log(store.qintianyong.total);
                setNewData(arr);
            }
            // console.log(res.data);
        });
    }, []);
    const pageChange = (page, size) => {
        console.log(page);
        store.qintianyong.current = page;
        http({
            url: "/payCost/tenantPropertyList",
            method: "get",
            params: {
                current: page,
                size: size,
            },
        }).then((res) => {
            console.log(res.data);
            if (res.code === 200) {
                let Data = res.data.data.map((v, i) => {
                    return {
                        key: v.ppcId,
                        personName: v.personName,
                        ppcDate: getLocalTime(v.ppcDate),
                        ppcRealDate: getLocalTime(v.ppcRealDate),
                        ppcMoney: v.ppcMoney,
                        ppcType: v.ppcType,
                    };
                });
                setNewData(Data);
            }

            // setNewData(arr);
        });
    };
    // 表格数据渲染区域
    const columns = [
        {
            title: "缴费人名",
            dataIndex: "personName",
            // render: (text) => <a>{text}</a>,
        },
        {
            title: "应缴费日期",
            dataIndex: "ppcDate",
        },
        {
            title: "实际缴费日期",
            dataIndex: "ppcRealDate",
        },
        {
            title: "缴费金额",
            dataIndex: "ppcMoney",
        },
        {
            title: "缴费类型",
            dataIndex: "ppcType",
        },

        // 表格后面的操作区域
        {
            title: "操作",
            dataIndex: "operation",
            render: (text, record) => (
                <Space size="middle">
                    <Popconfirm
                        title="确定要催缴吗?"
                        onConfirm={() => {
                            confirm(text, record);
                        }}
                        onCancel={cancel}
                        okText="是"
                        cancelText="否"
                    >
                        <a href="#">催缴</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // 删除方法
    function cancel(e) {
        console.log("点击了取消");
    }
    function confirm(a, b) {
        console.log("点击了确定");
        // http({
        //     url:'/admin/deladmin',
        //     method:'post',
        //     data:{
        //         id:b.id
        //     }
        // }).then((res)=>{
        //     console.log(res);
        // })
    }
    // 关闭返回页面
    const guanbi = () => {
        props.setaddpage1(false);
    };

    const [form] = Form.useForm();

    // 一键催缴的方法
    const One_click = () => {
        console.log("一键催缴的方法");
    };

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
        getCheckboxProps: (record) => ({
            name: record.name,
        }),
    };

    return (
        <div className="roleContent">
            {/* 头部信息区域 */}
            <Form
                form={form}
                name="horizontal_login"
                layout="inline"
                className="title"
            >
                <Form.Item name="username">
                    <div className="kuai">
                        <span></span>
                        <span>租户物业费催缴</span>
                    </div>
                </Form.Item>
                <Form.Item className="btn">
                    <div>
                        <Button
                            className="resize"
                            onClick={One_click}
                            type="primary"
                        >
                            一键催费
                        </Button>
                    </div>
                </Form.Item>
            </Form>
            <div className="biao">
                <Table
                    pagination={false}
                    className="table1"
                    rowSelection={{
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={newData}
                />
                <div className="Guanbi">
                    <Pagination
                        className="page"
                        defaultCurrent={1}
                        current={store.qintianyong.current}
                        total={store.qintianyong.total}
                        onChange={pageChange}
                    />
                </div>
                <div className="Guanbi">
                    <Button size="large" onClick={guanbi}>
                        关闭
                    </Button>
                </div>
            </div>
        </div>
    );
};
export default AddOne;
